<template>
	<view class="mfbs-main-content" style="background-color: rgb(245, 227, 213);">
		<toTop :scrollTop='scrollTop' @toTop='toTop'></toTop>
		<template v-if="title==''||dataList&&dataList.length==0">
			<view class="load">
				<u-loading-page :loading="true"></u-loading-page>
			</view>
		</template>
		<template v-else>
			<mfbsHead :backColor='backColor' :title='title' :isShow='isShow' :img_url='img_url'></mfbsHead>
			<view class="app-content">
				<view class="app-content-header">
					<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
						<swiper-item v-for="(item,index) in swiperList" :key="index">
							<view class="swiper-item">
								<image :src="item.pic_url" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="action-box">
						<image
							src="https://img.youpin.mi-img.com/jianyu/98ce5213_8be9_4999_b6ab_cb0e6de3054b.png@base@tag=imgScale&h=209&m=1&q=80&w=751">
						</image>
					</view>
				</view>
				<view class="app-content-view" v-if="dataList&&dataList.length!=0">
					<block v-for="(item,index) in fusion_custom_image" :key="index">
						<view class="app-content-view-title">
							<view class="title-content">
								<image :src="item.data.images[0].image_info.url" mode="widthFix"></image>
							</view>
							<twoRow :list="dataList[index]" backColor="rgb(245, 227, 213)"></twoRow>
						</view>
					</block>

				</view>
			</view>

		</template>
	</view>
</template>

<script>
	import mfbsHead from '../../components/mfbs-header/mfbs-header.vue'
	import toTop from '../../components/getTop/getTop.vue'
	import twoRow from '../../components/two-row-detail/two-row-detail.vue'
	let query_1 = {
		"query_list": [{
			"resolver": "mishop-grating",
			"sign": "99ed5b587b2d25f2df4288392e1ebc15",
			"parameter": "{\"plan_ids\":[1006043],\"manual_sort\":\"artificial_weight\",\"selectImg\":\"img800s\",\"labels_filter\":\"\",\"need_all\":false,\"limit\":18,\"column_number\":2}",
			"variable": {}
		}, {
			"resolver": "mishop-grating",
			"sign": "02b2fdc8bab766529afc10f980b88ae1",
			"parameter": "{\"plan_ids\":[1006044],\"manual_sort\":\"artificial_weight\",\"selectImg\":\"img800s\",\"labels_filter\":\"\",\"need_all\":false,\"limit\":20,\"column_number\":2}",
			"variable": {}
		}, {
			"resolver": "mishop-grating",
			"sign": "2d207cde3f13a428977037a49ae52454",
			"parameter": "{\"plan_ids\":[1006045],\"manual_sort\":\"artificial_weight\",\"selectImg\":\"img800s\",\"labels_filter\":\"\",\"need_all\":false,\"limit\":16,\"column_number\":2}",
			"variable": {}
		}, {
			"resolver": "mishop-grating",
			"sign": "d33b05e0f76e60b11e1fbc83bbbf17f9",
			"parameter": "{\"plan_ids\":[1006046],\"manual_sort\":\"artificial_weight\",\"selectImg\":\"img800s\",\"labels_filter\":\"\",\"need_all\":false,\"limit\":20,\"column_number\":2}",
			"variable": {}
		}]
	}
	let query_2 = {
		"query_list": [{
			"resolver": "mishop-grating",
			"sign": "0fdfa6d35f5abcc5ca7cd2a2387358be",
			"parameter": "{\"plan_ids\":[1009849],\"manual_sort\":\"artificial_weight\",\"selectImg\":\"img800s\",\"labels_filter\":\"\",\"need_all\":false,\"limit\":4,\"column_number\":2}",
			"variable": {}
		}, {
			"resolver": "mishop-grating",
			"sign": "7affe966cf046224c32851ff8f2b9e17",
			"parameter": "{\"plan_ids\":[1006039,1010215],\"manual_sort\":\"artificial_weight\",\"selectImg\":\"img800s\",\"labels_filter\":\"\",\"need_all\":false,\"limit\":30,\"column_number\":2}",
			"variable": {}
		}, {
			"resolver": "mishop-grating",
			"sign": "1d03347a588cb2bf3f2afa35a933b93a",
			"parameter": "{\"plan_ids\":[1006041],\"manual_sort\":\"artificial_weight\",\"selectImg\":\"img800s\",\"labels_filter\":\"\",\"need_all\":false,\"limit\":20,\"column_number\":2}",
			"variable": {}
		}]
	}
	export default {

		components: {
			toTop,
			twoRow,
			mfbsHead
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
			if (res.scrollTop >= 100) {
				this.isShow = true
				this.img_url = 'left_b'
				this.backColor = 'rgb(244, 244, 244)'
			} else {
				this.backColor = 'transparent'
				this.img_url = 'left'
				this.isShow = false
			}
		},
		data() {
			return {
				img_url: 'left',
				isShow: false,
				scrollTop: 0,
				backColor: 'transparent',
				swiperList: [],
				title: '',
				fusion_custom_image: [],
				floorList: [],
				towRowList: [],
				oneRowList: []
			};
		},
		computed: {
			dataList() {
				if (this.towRowList.length == 0 || this.towRowList.length == 0) return
				let list = []
				this.towRowList.forEach((item, index) => {
					if (item.list) {
						list.push(item.list)
					}
				})
				this.oneRowList.forEach((item, index) => {
					if (item.list) {
						list.push(item.list)
					}
				})
				return list;
			}
		},
		methods: {
			toTop() {
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0,
				})
			},
			getVenueBatchList(type) {
				let queryData
				if (type == 1) {
					queryData = query_1
				} else if (type == 2) {
					queryData = query_2
				}
				this.$request.get('/getVenueBatchList', {
					page_id: '11212',
					queryData: queryData,
					sign: '2617d49fa1f63ba7a3de34a2ba0cfe51'
				}).then((res) => {
					if (type == 1) {
						this.oneRowList = res.data.data.result_list
					} else {
						this.towRowList = res.data.data.result_list
					}
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			getVenuePageList() {
				this.$request.get('/getVenuePageList', {
					page_id: '11212',
					sign: '2617d49fa1f63ba7a3de34a2ba0cfe51'
				}).then((res) => {
					this.floorList = res.data.data.floors
					this.title = res.data.data.title
					this.floorList.forEach(item => {
						if (item.module_key == "fusion_banner") {
							this.swiperList = item.data.items
						} else if (item.module_key == 'fusion_custom_image') {
							this.fusion_custom_image.push(item)
						}
					})
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
		},
		onLoad() {
			this.getVenuePageList()
			this.getVenueBatchList(1)
			this.getVenueBatchList(2)
		}
	}
</script>

<style lang="scss" scoped>
	.action-box {
		width: 100%;
		height: 2rem;

		image {
			width: 100%;
			height: 2rem;
		}
	}

	.app-content-view-title {
		.title-content {
			padding: .26rem .21rem;

			image {
				border-radius: .134rem;
				width: 100%;
			}
		}
	}
</style>